
"use client"
import useCurrentUser from "@/app/utils/hooks/useCurrentUser";
import { signOut } from "next-auth/react";
import Image from "next/image";
interface AccountMenuProps {
    visible: boolean
}

export const AccountMenu = ({ visible }: AccountMenuProps) => {
    const { data } = useCurrentUser()
    if (!visible) {
        return null
    }

    return (
        <div className="bg-black w-56 absolute top-14 right-0 py-5 flex-col border-2 border-gray-800 flex select-none">
            <div className="flex flex-col gap-3">
                <div className="px-3 group/item flex flex-row gap-3 items-center w-full">
                    <div className="w-8 h-8 rounded-md overflow-hidden">
                        <Image src={"/avatar.png"} alt="profile" width={20} height={20} layout="responsive" />
                    </div>
                    <p className="text-white text-sm group-hover/item:underline">
                        {data?.name || '---'}
                    </p>
                </div>
                <hr className="bg-gray-300 border-0 h-px my-4" />
                <div onClick={() => signOut()} className="px-3 text-center text-white text-sm hover:underline">
                    Sign out of Netflix
                </div>
            </div>
        </div>
    )
}